import { Component } from 'react';
import ListCom from '../../components/content/todulist/Listcom';
import './Todulist.scss';
class TodoList extends Component {
  state = {
    content: '',
    listArr: ['吃饭', '睡觉', '打豆豆'],
  };
  // 获取输入的内容
  getContent(e) {
    console.log(e);
    this.setState({
      content: e.target.value,
    });
  }
  // 删除
  onDelete = (index) => {
    console.log(this);
    if (window.confirm('确定要删除吗？')) {
      this.state.listArr.splice(index, 1);
      this.setState({
        // 过滤掉下标相等的评论
        listArr: this.state.listArr,
      });
    }
  };
  // 清除
  onClear = () => {
    if (window.confirm('确定要全部清空吗？')) {
      this.setState({
        listArr: [],
      });
    }
  };
  // 点击确定添加致列表
  onConfirm() {
    const { content } = this.state;
    if (!content) return alert('输入框不可为空');
    this.setState({
      listArr: [...this.state.listArr, content],
      content: '',
    });
  }
  render() {
    return (
      <div className="todo-box">
        {/* title */}
        <header>记事本</header>
        {/* 标题 */}
        <div className="header">
          <h1>拾忆记事本</h1>
          <p>记录生活点点滴滴，写下生活每一个美好</p>
          {/* 搜索 */}
          <div className="add-record">
            <div>
              <select name="" id="">
                <option>内容</option>
                <option>标题</option>
              </select>
            </div>
            <input
              value={this.state.content}
              onChange={(e) => this.getContent(e)}
              placeholder="请输入你要记事的内容"
              type="text"
            />
            <div onClick={() => this.onConfirm()}>确认</div>
          </div>
        </div>
        {/* 列表 */}
        <ListCom
          listArr={this.state.listArr}
          onDelete={this.onDelete}
          onClear={this.onClear}
        />
      </div>
    );
  }
}

export default TodoList;
